<template>
  <div class="s-upload-wrapper"  id="uniqueUploadButton"  :style="{float:buttonFloat}">
    <div class="s-upload-label"    @click="initForm" :style="buttonStyle">{{text}}</div>
  </div>
</template>
<script>
export default {
  name: 'SUpload',
  props: {
    //是否可上传
    canUpload: {
      type: Boolean,
      default: true,
    },
    //按钮显示的文字
    text: {
      type: String,
      default: '导入文件',
    },
    //限制选择的文件类型，默认不限制
    accept: {
      type: String,
      default: null,
    },
    // 上传最大数量 默认为100,选择文件后在js中计算文件个数，并提示
    fileNumLimit: {
      type: Number,
      default: 100,
    },
    // 大小限制 默认100M
    fileSingleSizeLimit: {
      type: Number,
      default: 102400000,
    },
    // 上传时传给后端的参数，一般为token，key等？？？？
    formData: {
      type: Object,
      default:function(){
        return {};
      }
    },
    //是否可以上传多个文件，默认只能上传一个文件
    multiple: {
      type: Boolean,
      default: false,
    },
    // 上传按钮的样式设置
    buttonStyle: {
      type: Object,
      default:function(){
        return {};
      }
    },
    // 上传按钮的浮动方式设置
    buttonFloat: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      showUpload: true
    };
  },
  watch: {
    canUpload: {
      handler: function (val, oldValue) {
        this.showUpload = val;
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    initForm(e) {
      if (this.showUpload) {
        this.createUploadEle();
        document.getElementById('sUploadBtn').click();
      }
      this.$emit('click', e);
    },
    createUploadEle() {
      let div = document.getElementById('uniqueUploadButton');
      if (div.getElementsByTagName('form')[0] != undefined) {
        div.removeChild(div.getElementsByTagName('form')[0]);
      }
      let form = document.createElement('form');
      form.id = 'uniqueUploadForm';
      form.enctype = 'multipart/form-data';
      form.width = 0;
      form.height = 0;
      form.setAttribute('style', 'display:none');
      let input = document.createElement('input');
      input.id = 'sUploadBtn';
      input.type = 'file';
      input.width = '0';
      input.height = '0';
      input.accept = this.accept;
      input.multiple = this.multiple;
      input.setAttribute('style', 'display:none');
      form.appendChild(input);
      div.appendChild(form);
      document.getElementById('sUploadBtn').onclick = this.clickFileInput.bind(this);
    },
    clickFileInput() {
      let inputHtml = document.getElementById('sUploadBtn');
      inputHtml.onchange = this.onchange.bind(this);
    },
    onchange(e) {
      let formData = new FormData(document.getElementById('uniqueUploadForm'));
      let files = e.target.files;
      for (let key in files) {
        if (key != 'length' && key != 'item') {
          formData.append('files', files[key]);
        }
      }
      let overnumber = false;
      if (files.length > this.fileNumLimit) {
        overnumber = true;
        this.$emit('over-number', '最多能同时上传' + this.fileNumLimit + '个文件，请重新选择文件进行上传');
        return;
      }
      let oversize = false, str = '', i = 0;
      let keys = Object.keys(files);
      for (let key in files) {
        if (files[key].size > this.fileSingleSizeLimit) {
          oversize = true;
          str += files[key].name + '文件大小超过上限' + this.fileSingleSizeLimit + 'kb' + (i == keys.length - 1 ? '' : ';\n');
        }
        i++;
      }
      oversize && this.$emit('over-size', str);
      console.log('overnumber',overnumber,'oversize',oversize);
      if (!overnumber && !oversize) {
        this.$emit('change', { formData: formData, files: files });
      }
    },
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.s-upload-wrapper#uniqueUploadButton {
  float: left;
  overflow: hidden;
  transition: color 0.2s linear, background-color 0.2s linear,
    border 0.2s linear, box-shadow 0.2s linear;
  .s-upload-label {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #409eff;
    background: #409eff;
    color: #fff;
    @include borderRadius(4px);
    cursor: pointer;
    font-weight: normal;
    line-height: 1.5;
  }
}
</style>
